<template>
  <li>
    <span v-if="detail.productionState == 6 ? true : false" class="timecolor">此蛋糕无货，请联系用户更换蛋糕</span>
    <span v-if="detail.refundNotReturn === '退款不退货' ? true : false" class="timecolor">退款不退货</span>
    <span v-if="detail.refundMark" class="timecolor">{{ detail.refundMark }}</span>
    <span v-if="detail.tyingRefundNotReturn" class="timecolor">{{ detail.tyingRefundNotReturn }} （{{
      detail.tyingRefundContent }}）</span>
    <p style="display: flex; justify-content: space-between">
      <span><strong class="title-noEdit">蛋糕：</strong>{{ detail.goodsName }}</span>
    </p>
    <p>
      <span><strong class="title-noEdit">规格：</strong>
        <el-input v-if="ruleForm.status == 1 && detail.goodsSpecsFlags && mode == 'edit'" v-model.trim="detail.goodsSpecs" clearable
          maxlength="20" size="medium" style="width: 35%"></el-input>
        <span v-else>{{detail.goodsSpecs}}</span>
      </span>
    </p>
    <p>
      <span><strong class="title-noEdit">Sku码：</strong>
        <el-input v-if="ruleForm.status == 1 && mode == 'edit'" v-model="detail.skuCode" clearable
          onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)" maxlength="20"
          onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)" size="medium" style="width: 35%"></el-input>
        <span v-else>{{detail.skuCode}}</span>
      </span>
    </p>
    <p>
      <span><strong class="title-noEdit">价格：</strong>{{ (detail.totalPrice / 100).toFixed(2) }}元</span>
    </p>
    <p>
      <span><strong class="title-noEdit">数量：</strong>{{ detail.num }}</span>
    </p>
    <p>
      <span><strong class="title-noEdit">状态：</strong>{{ detail.productionStateName }}</span>
    </p>
    <p>
      <strong class="title-noEdit">商品类别：</strong>
      <el-cascader v-if="ruleForm.status == 1 && mode == 'edit'" v-model="detail.categoryIdArray" clearable
        :placeholder="`${detail.goodsTypeName}-${detail.minGoodsTypeName}`" :options="categoriesList"
        @change="handleCategoryChange(detail.categoryIdArray, index)"></el-cascader>
      <strong v-else>
        {{ detail.goodsTypeName }}-{{ detail.minGoodsTypeName }}
      </strong>
    </p>
    <p>
      <span class="p-r"><strong class="title-noEdit">祝福语：</strong>
        <template v-if="mode == 'edit'">
          <el-input type="textarea" class="orderspecial" v-model.trim="detail.blessings" show-word-limit autosize clearable
            size="medium" style="width: 45%"></el-input>
          <span v-if="detail.blessings && detail.blessings.length" class="c-999 p-a r-10 b-4 fz-12">{{
            detail.blessings.length }}</span>
        </template>
        <template v-else-if="mode == 'view'">
          <span class="c-red fw-bold">{{ detail.blessings }}</span>
        </template>
      </span>
    </p>
  </li>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      default: () => { }
    },
    ruleForm: {
      type: Object,
      default: () => { }
    },
    categoriesList: {
      type: Array,
      default: () => []
    },
    mode: {// edit,view
      type: String,
      default: 'edit'
    }
  },
  data() {
    return {

    };
  },
  methods: {
    handleCategoryChange() {
      this.$emit('cateGoryChange', { selecteds: this.detail.categoryIdArray })
    }
  }
};
</script>
<style lang="scss" scoped>
li {
  margin: 0 auto;
  width: 70%;
  padding: 10px 25px;
  list-style: none;
  background: #efefef;
  margin-bottom: 10px;

  p {
    .title-noEdit {
      display: inline-block;
      width: 80px;
      margin-right: 5px;
      text-align: right;
    }
  }

  .timecolor {
    width: 100%;
    line-height: 2;
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    color: red;
    text-align: right;
  }
}

/**********  祝福语标红、加粗  *************/
.orderspecial {
  ::v-deep .el-input__inner {
    color: red;
    font-weight: 600;
  }

  ::v-deep .el-textarea__inner {
    color: red;
    font-weight: 600;
  }
}
</style>